<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户登录</title>
  <style>
    /* 全局样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Microsoft YaHei", sans-serif;
    }

    body {
      /* 渐变背景 */
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .login-container {
      background-color: #fff;
      width: 400px;
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    .login-header {
      background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
      color: #fff;
      padding: 20px;
      text-align: center;
    }

    .login-header h2 {
      font-size: 24px;
      font-weight: 600;
    }

    .login-form {
      padding: 30px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      margin-bottom: 8px;
      color: #333;
      font-weight: 500;
    }

    .form-group input,
	.from-group select{
      width: 100%;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
      transition: border-color 0.3s ease;
	  background-color: #fff;
	    appearance: none; /* 移除默认样式 */
	    -webkit-appearance: none;
    }

    .form-group input:focus
	.form-group select:focus{
      border-color: #4b6cb7;
      outline: none;
    }

    .login-btn {
      width: 100%;
      padding: 12px;
      background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .login-btn:hover {
      background: linear-gradient(90deg, #3a589b 0%, #0f1b33 100%);
    }

    .result {
      margin-top: 15px;
      padding: 12px;
      border-radius: 6px;
      min-height: 40px;
      text-align: center;
    }

    .success {
      background-color: #e6f7ed;
      border: 1px solid #52c41a;
      color: #389e0d;
    }

    .failed {
      background-color: #fef0f0;
      border: 1px solid #ff4d4f;
      color: #cf1322;
    }

    .error {
      background-color: #fdf2f2;
      border: 1px solid #f56c6c;
      color: #901313;
    }
  </style>
</head>

<body>
  <div class="login-container">
    <div class="login-header">
      <h2>用户登录</h2>
    </div>
    <div class="login-form">
		<div class="form-group">
			<label for="userType">类型：</label>
			<select id="userType" class="form-control">
				<option value="student">学生</option>
				<option value="teacher">老师</option>
			</select>
		</div>
      <div class="form-group">
        <label for="name">账号：</label>
        <input type="text" id="name" placeholder="请输入账号">
      </div>
      <div class="form-group">
        <label for="password">密码：</label>
        <input type="password" id="password" placeholder="请输入密码">
      </div>
      <button id="loginButton" class="login-btn">登录</button>
      <div class="result" id="resultBox">
        <p id="resultText">请输入账号和密码进行登录</p>
      </div>
    </div>
  </div>

  <script>
    // 获取DOM元素
	const userTypeInput = document.getElementById('userType');
    const nameInput = document.getElementById('name');
    const passwordInput = document.getElementById('password');
    const loginButton = document.getElementById('loginButton');
    const resultBox = document.getElementById('resultBox');
    const resultText = document.getElementById('resultText');

    // 登录按钮点击事件
    loginButton.addEventListener('click', function () {
      // 获取输入值并去空格
	  const userType = userTypeInput.value.trim()
      const name = nameInput.value.trim();
      const password = passwordInput.value.trim();
	  
      // 输入验证
      if (!name || !password) {
        showResult('error', '请输入账号和密码');
        return;
      }

      // 构造请求数据
      const requestData = {
		  "UserType":userType,
        "Name": name,
        "Password": password
      };
      const jsonData = JSON.stringify(requestData);
      console.log("发送登录请求:", jsonData);

      // 发送POST请求（这里需要替换成你实际的后端接口地址）
      fetch("http://127.0.0.1:5001/verify", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: jsonData
      })
       .then(response => {
          if (!response.ok) {
            throw new Error(`HTTP错误：${response.status}`);
          }
          return response.json();
        })
       .then(data => {
          console.log("接收响应数据:", data);
          if (data.status === "success") {
            // 登录成功，存储用户名并跳转主页
            sessionStorage.setItem('username', data.data.username); 
			if(userType=="student"){
				window.location.href = "student_home.html";
			}else{
				window.location.href = "admin_home.html";
			}
          } else if (data.status === "failed") {
            showResult('failed', '账号或密码错误');
          } else {
            showResult('error', '未知响应状态');
          }
        })
       .catch(error => {
          console.error("请求出错:", error);
          showResult('error', `请求异常：${error.message}`);
        });
    });

    // 按Enter键提交
    passwordInput.addEventListener('keypress', function (e) {
      if (e.key === 'Enter') {
        loginButton.click();
      }
    });

    // 显示结果的工具函数
    function showResult(type, message) {
      resultBox.className = `result ${type}`;
      resultText.textContent = message;
    }
  </script>
</body>

</html>